import store from '@/store'
type ColorOption = 'white' | 'black'
interface MetaRules {
  meta?: {
    title?: string // 顶部导航栏标题
    showFootBar?: boolean // 显示h5底部导航栏 （不传不显示）
    showBack?: boolean // 显示h5顶部导航栏的返回按钮 （不传不显示）
    noTransition?: boolean // 隐藏页面切换的过渡动画（不传为隐藏）
    headBgColor?: string // h5头部导航栏背景颜色（默认：f7f7f7）
    headerTextColor?: ColorOption // h5头部导航栏文字图标颜色（可选：white、black;默认：black）
    nativeAppStatusBarBgColor?: string // 原生状态栏背景色（默认：f7f7f7）
    nativeAppStatusBarTextColor?: ColorOption // 原生状态栏文字颜色 （可选：white、black;默认：black）
    noScroll?: boolean // 内容区域禁止滚动 （自定义滚动区域的时候会用到）
    hideHeadPlaceholder?: boolean // 隐藏顶部状态栏位置的占位元素 （默认：false，沉浸式页面时你或许需要设置为true）
    keepAlive?: boolean // 是否缓存页面 （注意：需要缓存的页面必须要在路由中配置 keepAlive: true, 且路由中的name要与页面的name设置相同，且每个页面的name不要重复）
  }
}
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { nativeHandler } from 'qmp-native'
import Home from '../views/Home.vue'
export const routes: Array<RouteRecordRaw & MetaRules> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '带缓存的页面',
      showFootBar: true,
      keepAlive: true
    }
  },
  {
    path: '/search',
    name: 'Search',
    component: () => import(/* webpackChunkName: "about" */ '../views/Search.vue'),
    meta: {
      title: '非全屏滚动',
      showFootBar: true,
      headBgColor: 'transparent',
      nativeAppStatusBarBgColor: 'transparent',
      headerTextColor: 'white',
      nativeAppStatusBarTextColor: 'white',
      hideHeadPlaceholder: true,
      noScroll: true
    }
  },
  {
    path: '/setting',
    name: 'Setting',
    component: () => import(/* webpackChunkName: "about" */ '../views/Setting.vue'),
    meta: {
      title: '全屏滚动',
      showFootBar: true,
      headBgColor: 'transparent',
      nativeAppStatusBarBgColor: 'transparent',
      hideHeadPlaceholder: true
    }
  },
  {
    path: '/other',
    name: 'Other',
    component: () => import(/* webpackChunkName: "about" */ '../views/Other.vue'),
    meta: {
      title: '头部颜色自定义',
      showBack: true,
      //   noTransition: true,
      headBgColor: '#000000',
      nativeAppStatusBarBgColor: '#000000',
      headerTextColor: 'white',
      nativeAppStatusBarTextColor: 'white',
      noScroll: true,
      keepAlive: true
    }
  },
  {
    path: '/demo',
    name: 'Demo',
    component: () => import(/* webpackChunkName: "about" */ '../views/Demo.vue'),
    meta: {
      title: '返回测试自定义滚动位置记录',
      showBack: true,
      headBgColor: 'pink',
      nativeAppStatusBarBgColor: '#000000',
      headerTextColor: 'white',
      nativeAppStatusBarTextColor: 'white'
    }
  },
  {
    path: '/css',
    name: 'Css',
    component: () => import(/* webpackChunkName: "about" */ '../views/Css.vue'),
    meta: {
      title: 'css examples',
      showBack: true,
      //   noTransition: true,
      headBgColor: '#000000',
      nativeAppStatusBarBgColor: '#000000',
      headerTextColor: 'white',
      nativeAppStatusBarTextColor: 'white',
      noScroll: true,
      keepAlive: true
    }
  }
]

const router = createRouter({
  //   history: createWebHistory(process.env.BASE_URL), // history模式
  history: createWebHashHistory(), // hash模式
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition // 复位滚动位置
    }
    return { left: 0, top: 0 }
  }
})

// 自定义路由返回方法（用于实现返回页面过渡动画）
router.goBack = () => {
  // 离开的页面删除缓存
  const from = JSON.parse(JSON.stringify(router.currentRoute.value))
  const keepAlivePages = store.getters['app/keepAlivePages']
  if (from?.name && from.meta.keepAlive && keepAlivePages.includes(from.name)) {
    store.commit('app/deleteKeepAlivePage', from?.name)
  }

  router.isBack = true
  window.history.go(-1)
}

router.beforeEach(async (to, from, next): Promise<void> => {
  if (!to.meta.noTransition) {
    to.meta.transitionName = router.isBack ? 'page-back' : 'page-forward' // 设置页面前进、后退动画class
    router.isBack = false
  }

  // 原生app状态栏设置
  interface StatusBarParams {
    statusBarType: 1 | 2 // 设置原生app状态栏文字颜色： 1: 黑色  2：白色
    isToTop: boolean // 是否需要顶部距离(true:吸顶)
    statusBarBgColor: string // 设置原生app状态栏背景颜色（暂无用）
  }
  const toTextColor = to.meta.nativeAppStatusBarTextColor
  const fromTextColor = from.meta.nativeAppStatusBarTextColor
  const statusBarHeight = localStorage.getItem('nativeAppStateBarHeiight')
  const params: StatusBarParams = {
    statusBarType: to.meta.nativeAppStatusBarTextColor === 'white' ? 2 : 1,
    isToTop: true,
    statusBarBgColor: ''
  }
  // 跳转前的页面与跳转后的页面设置的原生app状态栏文字颜色相同，并且已经获取到了原生app高度，则直接跳转
  if (toTextColor === fromTextColor && statusBarHeight) {
    to.meta.nativeAppStatusBarHeight = Number(statusBarHeight)
    next()
    return
  }
  // 前页面与后页面原生app状态栏文字颜色不同，并且已经获取到了原生app高度，则需调用原生方法改变状态栏文字颜色，并同步跳转
  if (toTextColor !== fromTextColor && statusBarHeight) {
    to.meta.nativeAppStatusBarHeight = Number(statusBarHeight)
    nativeHandler('setupStatusBarStyle', params)
    next()
    return
  }
  // 第一次进入应用，获取原生app高度并缓存高度，并且异步跳转页面
  try {
    const res = await nativeHandler('setupStatusBarStyle', params)
    to.meta.nativeAppStatusBarHeight = res.statusBarHeight // 记录原生app返回的状态栏高度
    res.statusBarHeight && localStorage.setItem('nativeAppStateBarHeiight', res.statusBarHeight)
  } catch (error) {
    to.meta.nativeAppStatusBarHeight = 0
  }
  next()
})
export default router
